<%namespace file="utils.html" import="error_field"/>

<%doc>
  Fires custom event when subreddit selection changes. Add handler like:
  $("#sr-autocomplete").bind("sr-changed", function() { dostuff; })
</%doc>

<div id="sr-autocomplete-area">
  <input id="sr-autocomplete" name="sr" type="text"
         autocomplete="off"
         %if thing.include_searches:
           onkeyup="sr_name_up(event)"
         %endif
         onkeydown="return sr_name_down(event)"
         onblur="hide_sr_name_list()"
         % if thing.default_sr:
           value="${thing.default_sr.name}"
         % endif
         % if thing.required:
         required
         % endif
         % if thing.class_name:
          class="${thing.class_name}"
         % endif
         % if thing.placeholder:
          placeholder="${thing.placeholder}"
         % endif
         />
  % if thing.show_add:
    <button class="add">${_("add")}</button>
  % endif
  <ul id="sr-drop-down">
    <li class="sr-name-row"
        onmouseover="highlight_reddit(this)"
        onmousedown="return sr_dropdown_mdown(this)"
        onmouseup="sr_dropdown_mup(this)">nothin</li>
  </ul>
</div>
<script type="text/javascript">
  r.config.sr_cache = ${unsafe(thing.sr_searches)};
</script>
${error_field("SUBREDDIT_NOEXIST", "sr", "div")}
${error_field("SUBREDDIT_NOTALLOWED", "sr", "div")}
${error_field("SUBREDDIT_REQUIRED", "sr", "div")}

<div id="suggested-reddits">
  % for title, subreddits in thing.subreddit_names:
    <h3>${title}</h3>
    <ul>
      %for name in subreddits:
      <li>
        <a href="#" tabindex="100" onclick="set_sr_name(this); return false">${name}</a>&#32;
      </li>
      %endfor
    </ul>
  % endfor
</div>
